<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		.radio{
			width: 16px;
			height: 16px;
			position: relative;
			padding: 0;
		}
		.radio .check-box{
			box-sizing: content-box;
			position: absolute;
			background-color: white;
			width: 16px;
			height: 16px;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 2px;
			border: 1px solid rgb(224, 224, 230);
			padding: 0;
			margin: 0;
			display: inline-flex;
			align-items: center;
		}
		
		.check-box .check-icon{
			opacity:0;
			transform:scale(0.5);
			transform-origin:center;
			height: 100%;
		}
		
		.radio-checked .check-box .check-icon{
			opacity:1;
			transform:scale(1);
			fill: #FFF;
			background-color: #18a058;
			transform-origin:center;
		}
	</style>
	<body>
		
	
		<div class="radio ">
			<div class="check-box">
				<svg viewBox="0 0 64 64" class="check-icon" ><path d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z"></path></svg>
			</div>
		</div>
		
		<script>
			let doms=document.querySelectorAll(".radio");
			doms.forEach((e)=>{
				e.addEventListener('click',function(n){
					if(e.classList.contains("radio-checked")){
						e.classList.remove("radio-checked")
					}else{
						e.classList.add("radio-checked")
					}
				})
			})
		</script>
	</body>
</html>